<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="./js/iconfont.js"></script>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/happy.css">
    <title>开心网</title>
</head>

<body>
    <div class="nav">
        <div class="nav-left">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kaixinwang"></use>
            </svg>
            <a href="">开心网</a>
        </div>
        <div class="nav-right">
            <a href="#">导航</a>
            <div class="box">
                <a href="#">注册</a>
                <a href="#">登录</a>
                <a href="#">帮助</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="header">
            <div class="header-top">
                <div class="headerTop-left">
                    <h5>SNS服务</h5>
                </div>
                <div class="headerTop-rigth">
                    <a href="#">更多SNS服务>></a>
                </div>
            </div>
            <div class="header-info">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lanlvtubiaozhizuomoban-12"></use>
                    </svg>
                    <a href="#">转贴</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingtuxuetang-toupiao-"></use>
                    </svg>
                    <a href="#">投票</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duibivs"></use>
                    </svg>
                    <a href="#">评比</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iMoviedianying"></use>
                    </svg>
                    <a href="#">电影</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duibivs"></use>
                    </svg>
                    <a href="#">日记</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-riji"></use>
                    </svg>
                    <a href="#">照片</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <a href="#">记录</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangpan"></use>
                    </svg>
                    <a href="#">网盘</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiugongge"></use>
                    </svg>
                    <a href="#">九宫格日记</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu"></use>
                    </svg>
                    <a href="#">礼物</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti"></use>
                    </svg>
                    <a href="#">专题</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_phone_workmate_"></use>
                    </svg>
                    <a href="#">同名缘</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoemo"></use>
                    </svg>
                    <a href="#">八一八</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengqi"></use>
                    </svg>
                    <a href="#">去你妹</a>
                </div>
            </div>
        </div>
        <hr>
        <div class="main">
            <div class="main-top">
                <div class="mainTop-left">
                    <h5>手机服务</h5>
                </div>
            </div>
            <div class="main-info">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingguo"></use>
                    </svg>
                    <a href="#">iPhone版</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anzhuo"></use>
                    </svg>
                    <a href="#">Android版</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-si-glyph-sms"></use>
                    </svg>
                    <a href="#">Symbian</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongxinjizhan"></use>
                    </svg>
                    <a href="#">短彩信服务</a>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liulanqi"></use>
                    </svg>
                    <a href="#">Wap版</a>
                </div>
            </div>
        </div>
        <hr>
        <div class="footer">
            <div class="footer-top">
                <div class="footerTop-left">
                    <h5>公共主页</h5>
                </div>
                <div class="footerTop-rigth">
                    <a href="#">所有公共主页>></a>
                </div>
            </div>
            <div class="footer-info">
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/成龙.png" alt="" srcset="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">成龙</a>
                        <p>1893256粉丝</p>
                    </div>
                </div>

                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/李连杰.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">李连杰</a>
                        <p>2550320粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/许茹芸.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">许茹芸</a>
                        <p>2154521粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/刘烨.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">刘烨</a>
                        <p>1023025粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/黄健翔.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">黄健翔</a>
                        <p>1013960粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/郎朗.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">郎朗</a>
                        <p>1354665粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/杨澜.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">杨澜</a>
                        <p>1245201粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/王利芬.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">王利芬</a>
                        <p>455990粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/王石.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">王石</a>
                        <p>538865粉丝</p>
                    </div>
                </div>
            </div>
            <div class="footer-info1">
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/开心城市.png" alt="" srcset="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">开心城市</a>
                        <p>3631007粉丝</p>
                    </div>
                </div>

                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/每日精品推荐.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">每日精品推荐</a>
                        <p>3502211粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/大众汽车.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">大众汽车</a>
                        <p>2735181粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/匿名.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">刘烨</a>
                        <p>1735181粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/星座总动员.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">星座总动员</a>
                        <p>1709953粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/mini.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">MINI</a>
                        <p>1297600粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/买房子送花园.png" alt="">

                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">买房子送花园</a>
                        <p>1277308粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/诺基亚.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">诺基亚</a>
                        <p>1212344粉丝</p>
                    </div>
                </div>
                <div class="info">
                    <div class="info-img">
                        <img src="./imgs/开心庄园.png" alt="">
                    </div>
                    <div class="personal">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qizi"></use>
                        </svg>
                        <a href="#">开心庄园</a>
                        <p>1191853粉丝</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>